<template>
    <div class="moment-detail-wrapper">
        <div class="moment-detail-container" v-loading="loading" element-loading-text="正在加载中...">
            <PageHeader height="50vh" :customTexts="[moment ? truncateText(moment.content) : '说说详情', '始于代码，不止于代码。']"
                :backgroundChangeInterval="30000" :imageSourcesConfig="['ysz']">
                <template #overlay>
                    <div class="header-overlay">
                        <div class="header-content">
                            <h1 class="page-title">说说详情</h1>
                            <div class="subtitle">分享你的心情和想法</div>
                        </div>
                    </div>
                </template>
            </PageHeader>
            <!-- 设计方案：为优化"说说详情"页面加载时出现长时间空白的问题作出的相关优化方案：
             1. 即时显示页面标题：PageHeader（即页面顶部带有标题和背景的部分）在数据加载时也能立即显示，
               而不是等待数据加载完成后再出现。这样可以避免页面布局在加载前后发生较大变化，给用户一个稳定的视觉焦点。
             2. 引入骨架屏（Skeleton Screen）：在等待说说具体内容加载完成的过程中，用一个"骨架屏"来替代原来的加载中图标。
             这个骨架屏会以灰色占位符的形式，大致模拟出最终内容的布局，比如头像、文字段落和操作按钮的轮廓。
             这样做比一个简单的旋转图标更能有效地告知用户"内容正在加载中"，并让等待过程感觉更自然、更快速。 -->
            <div class="main-content">
                <template v-if="loading">
                    <div class="moment-item skeleton-wrapper">
                        <el-skeleton animated>
                            <template #template>
                                <div class="skeleton-layout">
                                    <div class="skeleton-avatar-part">
                                        <el-skeleton-item variant="image" class="skeleton-avatar" />
                                        <div class="skeleton-mobile-user-info">
                                            <el-skeleton-item variant="p" style="width: 100px; margin-bottom: 8px;" />
                                            <el-skeleton-item variant="p" style="width: 150px;" />
                                        </div>
                                    </div>
                                    <div class="skeleton-main-part">
                                        <div class="skeleton-header">
                                            <el-skeleton-item variant="p" style="width: 120px;" />
                                            <el-skeleton-item variant="p" style="width: 180px;" />
                                        </div>
                                        <div class="skeleton-content-wrapper">
                                            <el-skeleton :rows="5" />
                                        </div>
                                        <div class="skeleton-actions">
                                            <el-skeleton-item variant="button" />
                                            <el-skeleton-item variant="button" />
                                            <el-skeleton-item variant="button" />
                                            <el-skeleton-item variant="button" />
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </el-skeleton>
                    </div>
                </template>
                <template v-else>
                    <div v-if="moment" class="moment-item" :data-moment-id="moment.id"
                        :class="{ 'animated': contentReadyForAnimation }">
                        <!-- 这里将复用 moments/index.vue 的大部分结构来展示说说 -->
                        <div class="user-avatar">
                            <el-popover placement="top-start" trigger="hover" :width="280">
                                <template #reference>
                                    <el-avatar :size="50" :src="moment.avatar" @click="goToUserPage(moment.userId)"
                                        style="cursor: pointer;"></el-avatar>
                                </template>
                                <UserProfileCard :user-id="moment.userId" @close-popover="onClosePopover" />
                            </el-popover>
                            <div class="mobile-user-info">
                                <span class="name user-link" @click="goToUserPage(moment.userId)">{{ moment.nickname
                                }}</span>
                                <!-- 在说说时间显示部分修改 -->
                                <!-- 原始发布时间显示 -->
                                <div class="moment-time-container"
                                    v-if="!moment.updateTime || moment.updateTime === moment.createTime">
                                    <div class="moment-time" :title="formatFullTime(moment.createTime)">
                                        <i class="el-icon-time"></i>
                                        <span class="time-text">{{ formatCombinedTime(moment.createTime) }}</span>
                                    </div>
                                </div>

                                <!-- 更新时间显示 -->
                                <div class="moment-time-container updated" v-else>
                                    <div class="moment-time" :title="formatFullTime(moment.createTime)">
                                        <i class="el-icon-time"></i>
                                        <span class="time-text">{{ formatCombinedTime(moment.createTime) }}</span>
                                    </div>
                                    <div class="moment-time update-time" :title="formatFullTime(moment.updateTime)">
                                        <i class="el-icon-refresh"></i>
                                        <span class="time-text">更新于 {{ formatCombinedTime(moment.updateTime) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="moment-main">
                            <div class="moment-header">
                                <span class="name">{{ moment.nickname }}</span>
                                <!-- 原始发布时间显示 -->
                                <div class="moment-time-container"
                                    v-if="!moment.updateTime || moment.updateTime === moment.createTime">
                                    <div class="moment-time" :data-full-time="formatFullTime(moment.createTime)">
                                        <i class="el-icon-time"></i>
                                        <span class="time-text">{{ formatCombinedTime(moment.createTime) }}</span>
                                    </div>
                                </div>

                                <!-- 更新时间显示 -->
                                <div class="moment-time-container updated" v-else>
                                    <div class="moment-time" :data-full-time="formatFullTime(moment.createTime)">
                                        <i class="el-icon-time"></i>
                                        <span class="time-text">{{ formatCombinedTime(moment.createTime) }}</span>
                                    </div>
                                    <div class="moment-time update-time"
                                        :data-full-time="formatFullTime(moment.updateTime)">
                                        <i class="el-icon-refresh"></i>
                                        <span class="time-text">更新于 {{ formatCombinedTime(moment.updateTime) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="moment-content-wrapper" :class="{ 'animated': contentReadyForAnimation }">
                                <div class="moment-content" v-html="renderContent(moment.content)"
                                    :class="{ 'collapsed': !moment.expanded && isContentTooLong(moment.content) }"
                                    v-auto-link-jump="{ exclude: ['.no-jump'] }"></div>
                                <!-- 展开/收缩按钮 -->
                                <div v-if="isContentTooLong(moment.content)" class="expand-collapse-btn"
                                    @click="toggleExpand(moment)">
                                    <span>{{ moment.expanded ? '收起内容' : '展开全文' }}</span>
                                    <i :class="moment.expanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                                </div>
                                <!-- 说说图片展示 -->
                                <div class="moment-images" v-if="moment.images && moment.images !== ''">
                                    <!-- 限制最多显示9张图片 -->
                                    <div v-for="(img, index) in parseImages(moment.images).slice(0, 9)" :key="index"
                                        class="image-container"
                                        @click="previewImage(parseImages(moment.images), index)">
                                        <img v-lazy="img" :key="img" alt="说说图片" />
                                    </div>
                                </div>
                            </div>
                            <!-- 说说操作区域 -->
                            <div class="moment-actions">
                                <!-- 点赞按钮 -->
                                <div class="action-item" @click="handleLikeMoment(moment)">
                                    <i :class="['far fa-heart', { 'fas fa-heart liked': moment.isLiked }]"></i>
                                    <span>{{ moment.likeCount || 0 }}</span>
                                </div>

                                <!-- 评论按钮 -->
                                <div class="action-item" @click="focusCommentInput">
                                    <i class="el-icon-chat-line-square"></i>
                                    <span>{{ moment.commentCount || 0 }}</span>
                                </div>

                                <!-- 复制按钮 -->
                                <div class="action-item">
                                    <copy-content :content="moment.content" success-text="说说内容已复制" />
                                </div>

                                <!-- 分享按钮 -->
                                <div class="action-item">
                                    <share-card :content="moment.content" :images="parseImages(moment.images)"
                                        :nickname="moment.nickname" :avatar="moment.avatar" :moment-id="moment.id"
                                        :create-time="moment.createTime" :update-time="moment.updateTime" />
                                </div>
                            </div>

                            <!-- 评论区域 -->
                            <div class="comments-section" v-if="moment.showComments">
                                <div class="comments-loading" v-if="moment.commentsLoading">
                                    <el-skeleton :rows="3" animated />
                                </div>
                                <div v-else>
                                    <!-- 评论列表 -->
                                    <div class="comments-list" v-if="moment.comments && moment.comments.length > 0">
                                        <!-- 每个评论项 -->
                                        <div v-for="(comment, index) in moment.comments" :key="comment.id"
                                            class="comment-thread" :class="{ 'animated': contentReadyForAnimation }"
                                            :style="{ 'animation-delay': (index * 0.1) + 's' }">
                                            <!-- 主评论 -->
                                            <div class="comment-item">
                                                <div class="comment-avatar">
                                                    <el-popover placement="right-start" trigger="hover" :width="280">
                                                        <template #reference>
                                                            <el-avatar :size="40" :src="comment.avatar"
                                                                @click="goToUserPage(comment.userId)"
                                                                style="cursor: pointer;"></el-avatar>
                                                        </template>
                                                        <UserProfileCard :user-id="comment.userId"
                                                            @close-popover="onClosePopover" />
                                                    </el-popover>
                                                </div>
                                                <div class="comment-content">
                                                    <div class="comment-header">
                                                        <span class="comment-user user-link"
                                                            @click="goToUserPage(comment.userId)">{{
                                                                comment.nickname
                                                            }}</span>
                                                        <span class="comment-time"
                                                            :data-full-time="formatFullTime(comment.createTime)">
                                                            {{ formatCombinedTime(comment.createTime) }}
                                                        </span>
                                                        <span v-if="userInfo && userInfo.id === comment.userId"
                                                            class="delete-btn"
                                                            @click.stop="handleDeleteComment(comment.id, moment.id)">
                                                            <i class="el-icon-delete"></i>
                                                        </span>
                                                    </div>
                                                    <div class="comment-text">{{ comment.content }}</div>

                                                    <!-- 评论操作区 -->
                                                    <div class="comment-actions">
                                                        <div class="action-btn"
                                                            @click="handleLikeComment(comment, moment.id)">
                                                            <i
                                                                :class="['far fa-heart', { 'fas fa-heart liked': comment.isLiked }]"></i>
                                                            <span>{{ comment.likeCount || 0 }}</span>
                                                        </div>
                                                        <div class="action-btn"
                                                            @click="showReplyForm(comment, moment.id)">
                                                            <i class="el-icon-chat-dot-square"></i>
                                                            <span>回复</span>
                                                        </div>
                                                    </div>

                                                    <!-- 回复表单 -->
                                                    <div class="reply-form" v-if="comment.showReplyForm">
                                                        <el-input v-model="comment.replyContent" type="textarea"
                                                            :rows="2" :placeholder="'回复 ' + comment.nickname + '...'"
                                                            resize="none" class="reply-input"></el-input>
                                                        <div class="form-actions">
                                                            <el-button size="small"
                                                                @click="cancelReply(comment)">取消</el-button>
                                                            <el-button type="primary" size="small"
                                                                @click="submitReply(comment, moment.id)"
                                                                :loading="comment.replySubmitting">
                                                                发表回复
                                                            </el-button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- 回复列表 -->
                                            <div class="replies-list"
                                                v-if="comment.children && comment.children.length > 0">
                                                <div v-for="reply in comment.children" :key="reply.id"
                                                    class="reply-item">
                                                    <div class="reply-avatar">
                                                        <el-popover placement="right-start" trigger="hover"
                                                            :width="280">
                                                            <template #reference>
                                                                <el-avatar :size="30" :src="reply.avatar"
                                                                    @click="goToUserPage(reply.userId)"
                                                                    style="cursor: pointer;"></el-avatar>
                                                            </template>
                                                            <UserProfileCard :user-id="reply.userId"
                                                                @close-popover="onClosePopover" />
                                                        </el-popover>
                                                    </div>
                                                    <div class="reply-content">
                                                        <div class="reply-header">
                                                            <span class="reply-user user-link"
                                                                @click="goToUserPage(reply.userId)">{{
                                                                    reply.nickname
                                                                }}</span>
                                                            <span class="reply-to"
                                                                v-if="reply.replyToUser && reply.nickname !== reply.replyToUser">
                                                                <span class="reply-separator">回复</span>
                                                                <span class="reply-to-name">{{ reply.replyToUser
                                                                }}</span>
                                                            </span>
                                                            <span class="reply-time"
                                                                :data-full-time="formatFullTime(reply.createTime)">
                                                                {{ formatCombinedTime(reply.createTime) }}
                                                            </span>
                                                            <span v-if="userInfo && userInfo.id === reply.userId"
                                                                class="delete-btn"
                                                                @click.stop="handleDeleteComment(reply.id, moment.id)">
                                                                <i class="el-icon-delete"></i>
                                                            </span>
                                                        </div>
                                                        <div class="reply-text">{{ reply.content }}</div>

                                                        <div class="reply-actions">
                                                            <div class="action-btn"
                                                                @click="handleLikeComment(reply, moment.id)">
                                                                <i
                                                                    :class="['far fa-heart', { 'fas fa-heart liked': reply.isLiked }]"></i>
                                                                <span>{{ reply.likeCount || 0 }}</span>
                                                            </div>
                                                            <div class="action-btn"
                                                                @click="showReplyForm(reply, moment.id)">
                                                                <i class="el-icon-chat-dot-square"></i>
                                                                <span>回复</span>
                                                            </div>
                                                        </div>

                                                        <!-- 回复的回复表单 -->
                                                        <div class="reply-form" v-if="reply.showReplyForm">
                                                            <el-input v-model="reply.replyContent" type="textarea"
                                                                :rows="2" :placeholder="'回复 ' + reply.nickname + '...'"
                                                                resize="none" class="reply-input"></el-input>
                                                            <div class="form-actions">
                                                                <el-button size="small"
                                                                    @click="cancelReply(reply)">取消</el-button>
                                                                <el-button type="primary" size="small"
                                                                    @click="submitReply(reply, moment.id)"
                                                                    :loading="reply.replySubmitting">
                                                                    发表回复
                                                                </el-button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 无评论提示 -->
                                    <div class="no-comments" v-else>
                                        <i class="el-icon-chat-dot-round"></i>
                                        暂无评论，快来发表第一条评论吧
                                    </div>

                                    <!-- 评论分页 -->
                                    <div class="comments-pagination"
                                        v-if="moment.commentTotal > moment.commentPageSize">
                                        <el-pagination background layout="prev, pager, next"
                                            :total="moment.commentTotal" :page-size="moment.commentPageSize"
                                            :current-page.sync="moment.commentPage"
                                            @current-change="page => loadComments(moment.id, page)"></el-pagination>
                                    </div>

                                    <!-- 发表评论表单 -->
                                    <div class="comment-form">
                                        <div class="comment-form-header">
                                            <div class="current-user" v-if="userInfo">
                                                <img v-lazy="userInfo.avatar" :key="userInfo.avatar" alt="用户头像"
                                                    class="user-avatar-img" />
                                                <span class="user-name">{{ userInfo.nickname }}</span>
                                            </div>
                                            <router-link to="/login" class="login-tip" v-else>
                                                <i class="el-icon-warning-outline"></i>
                                                <span>请先登录后发表评论</span>
                                            </router-link>
                                        </div>
                                        <el-input ref="commentInput" v-model="moment.commentContent" type="textarea"
                                            :rows="3" placeholder="发表你的评论..." resize="none"
                                            class="comment-input"></el-input>
                                        <div class="form-actions">
                                            <div class="comment-tips">
                                                文明评论，理性讨论
                                            </div>
                                            <el-button type="primary" @click="submitComment(moment)"
                                                :loading="moment.commentSubmitting" icon="el-icon-s-promotion"
                                                :disabled="!userInfo || moment.commentSubmitting">
                                                发表评论
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <el-empty v-else-if="!moment" description="说说不存在或已被删除" :image-size="200">
                        <template #description>
                            <p class="empty-text">说说不存在或已被删除</p>
                            <el-button type="primary" @click="$router.push('/moments')">返回说说列表</el-button>
                        </template>
                    </el-empty>
                </template>
            </div>
        </div>
        <!-- 图片预览 -->
        <mj-image-preview ref="imagePreview" />

        <!-- 返回顶部按钮 -->
        <div class="back-to-top" @click="scrollToTop" v-show="showBackToTop">
            <i class="el-icon-arrow-up"></i>
        </div>
    </div>
</template>

<script>
import { formatTime, formatDetailTime, formatCombinedTime } from '@/utils/time'
import {
    getMoments, addMoment, toggleMomentLike, getMomentLikeCount,
    checkMomentLikeStatus, addComment, replyComment, getMomentComments,
    toggleCommentLike, checkCommentLikeStatus, getMomentDetail,
    getMomentCommentCount, deleteComment
} from '@/api/moments'
import { mapState } from 'vuex'
import highlightUtil, { renderContent, applyHighlighting } from '@/utils/highlight'
import '@/utils/highlight.css'
import CopyContent from '@/components/common/CopyContent.vue'
import ShareCard from '@/components/common/ShareCard.vue'
import PageHeader from '@/components/PageHeader/index.vue'
import UserProfileCard from '@/components/UserProfileCard/index.vue'
import Prism from 'prismjs';

export default {
    name: 'MomentDetail',
    components: {
        'copy-content': CopyContent,
        ShareCard,
        PageHeader,
        UserProfileCard
    },
    data() {
        return {
            moment: null,
            loading: true,
            params: {
                pageNum: 1,
                pageSize: 10
            },
            showBackToTop: false,
            contentReadyForAnimation: false,
        }
    },
    computed: {
        ...mapState(['userInfo']),
    },
    mounted() {
        this.fetchMomentDetail()
        window.addEventListener('scroll', this.handleScroll)
        this.$store.dispatch('contentReady');
    },
    destroyed() {
        window.removeEventListener('scroll', this.handleScroll)
    },
    methods: {
        handleScroll() {
            this.showBackToTop = window.scrollY > 300
        },

        scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            })
        },

        async fetchMomentDetail() {
            const momentId = this.$route.params.id
            try {
                const res = await getMomentDetail(momentId, this.params.pageNum, this.params.pageSize)
                if (res.code === 200 && res.data) {
                    this.moment = {
                        ...res.data.moment,
                        showComments: true,
                        commentsLoading: false,
                        commentContent: '',
                        commentSubmitting: false,
                        isLiked: res.data.isLiked,
                        likeCount: res.data.likeCount,
                        commentCount: res.data.commentCount,
                        expanded: true,
                        comments: res.data.comments.records || [],
                        commentTotal: res.data.comments.total || 0,
                        commentPage: res.data.comments.current || 1,
                        commentPageSize: this.params.pageSize
                    };
                    this.processComments(this.moment);
                    this.$nextTick(() => {
                        applyHighlighting();
                        this.contentReadyForAnimation = true;
                    })
                } else {
                    this.$message.error(res.msg || '获取说说详情失败')
                    this.moment = null
                }
            } catch (error) {
                console.error('获取说说详情失败:', error)
                this.$message.error('获取说说详情失败，请检查网络或刷新重试')
                this.moment = null
            } finally {
                this.loading = false
            }
        },

        focusCommentInput() {
            this.$refs.commentInput.focus();
        },

        truncateText(html) {
            if (!html) return '';
            const text = html.replace(/<[^>]+>/g, '');
            return text.length > 50 ? text.substring(0, 50) + '...' : text;
        },

        // --- 以下方法大部分从 moments/index.vue 迁移过来 ---
        formatFullTime(time) {
            if (!time) return '';
            const date = new Date(time);
            return date.toLocaleString('zh-CN', {
                year: 'numeric', month: '2-digit', day: '2-digit',
                hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
            });
        },
        formatCombinedTime,
        isContentTooLong(content) {
            if (!content) return false;
            const plainText = content.replace(/<[^>]+>/g, '');
            const hasCodeBlock = /<pre[^>]*>/i.test(content);
            const lineCount = (plainText.match(/\n/g) || []).length;
            return hasCodeBlock || plainText.length > 300 || lineCount > 5;
        },
        toggleExpand(moment) {
            const isCollapsing = moment.expanded;

            // 特殊处理折叠，防止用户滚动后，折叠后卡片顶部超出屏幕
            if (isCollapsing) {
                const momentElement = this.$el.querySelector(`.moment-item[data-moment-id="${moment.id}"]`);

                if (momentElement) {
                    const rect = momentElement.getBoundingClientRect();
                    // 如果卡片顶部已经超出屏幕（用户已经向下滚动）
                    if (rect.top < 0) {
                        // 在折叠后，将卡片顶部滚动回视图。
                        this.$set(moment, 'expanded', false);
                        this.$nextTick(() => {
                            applyHighlighting('.moment-content');

                            // 需要考虑固定头部的偏移，设置为80px试试
                            const headerOffset = 80;
                            const elementPosition = momentElement.getBoundingClientRect().top + window.scrollY;
                            const offsetPosition = elementPosition - headerOffset;

                            window.scrollTo({
                                top: offsetPosition,
                                behavior: 'smooth'
                            });
                        });
                        return; // 已经处理了这个情况，退出。
                    }
                }
            }

            // 默认行为，展开或折叠时顶部可见。
            this.$set(moment, 'expanded', !moment.expanded);
            this.$nextTick(() => {
                applyHighlighting('.moment-content');
            });
        },
        renderContent,
        parseImages(imagesStr) {
            if (!imagesStr || imagesStr === '') return [];
            try {
                if (typeof imagesStr === 'string') {
                    if (imagesStr.startsWith('[') && imagesStr.endsWith(']')) {
                        return [...new Set(JSON.parse(imagesStr))];
                    }
                    return [...new Set(imagesStr.split(',').filter(img => img && img.trim() !== ''))];
                }
                if (Array.isArray(imagesStr)) {
                    return [...new Set(imagesStr)];
                }
                return [];
            } catch (err) {
                console.error('解析图片失败:', err);
                return [];
            }
        },
        previewImage(images, index) {
            if (this.$refs.imagePreview) {
                this.$refs.imagePreview.show(images, index)
            }
        },
        async handleLikeMoment(moment) {
            if (!this.userInfo) {
                this.$message.warning('请先登录')
                this.$router.push('/login')
                return
            }
            try {
                const res = await toggleMomentLike(moment.id)
                if (res.code === 200) {
                    this.$set(moment, 'isLiked', res.data)
                    await this.getMomentLikeCount(moment.id)
                }
            } catch (error) {
                this.$message.error('操作失败')
            }
        },
        async getMomentLikeCount(momentId) {
            try {
                const res = await getMomentLikeCount(momentId)
                if (res.code === 200) {
                    this.$set(this.moment, 'likeCount', res.data)
                }
            } catch (error) {
                console.error('获取点赞数失败:', error)
            }
        },
        async loadComments(momentId, page = 1) {
            const moment = this.moment;
            if (!moment) return;
            moment.commentsLoading = true;
            moment.commentPage = page;
            try {
                const res = await getMomentComments(momentId, page, moment.commentPageSize);
                if (res.code === 200) {
                    this.$set(moment, 'comments', res.data.records || []);
                    this.$set(moment, 'commentTotal', res.data.total || 0);
                    this.processComments(moment);
                }
            } catch (error) {
                console.error('获取评论列表失败:', error);
            } finally {
                moment.commentsLoading = false;
            }
        },
        async submitComment(moment) {
            if (!this.userInfo) {
                this.$message.warning('请先登录')
                this.$router.push('/login')
                return
            }
            if (!moment.commentContent.trim()) {
                this.$message.warning('评论内容不能为空')
                return
            }
            moment.commentSubmitting = true
            try {
                const res = await addComment({
                    momentId: moment.id,
                    content: moment.commentContent.trim()
                })
                if (res.code === 200) {
                    this.$message.success('评论成功')
                    moment.commentContent = ''
                    await this.loadComments(moment.id)
                    await this.getMomentCommentCount(moment.id)
                } else {
                    this.$message.error(res.msg || '评论失败')
                }
            } catch (error) {
                this.$message.error('评论失败')
            } finally {
                moment.commentSubmitting = false
            }
        },
        async getMomentCommentCount(momentId) {
            try {
                const res = await getMomentCommentCount(momentId)
                if (res.code === 200) {
                    this.$set(this.moment, 'commentCount', res.data)
                }
            } catch (error) {
                console.error('获取评论数失败:', error)
            }
        },
        processComments(moment) {
            if (!moment || !moment.comments) return;
            const userMap = new Map();
            moment.comments.forEach(comment => {
                userMap.set(comment.userId, { nickname: comment.nickname, avatar: comment.avatar });
                if (comment.children && comment.children.length > 0) {
                    comment.children.forEach(reply => {
                        userMap.set(reply.userId, { nickname: reply.nickname, avatar: reply.avatar });
                    });
                }
            });

            moment.comments.forEach(comment => {
                this.$set(comment, 'showReplyForm', false);
                this.$set(comment, 'replyContent', '');
                this.$set(comment, 'replySubmitting', false);
                if (comment.children && comment.children.length > 0) {
                    comment.children.forEach(reply => {
                        this.$set(reply, 'showReplyForm', false);
                        this.$set(reply, 'replyContent', '');
                        this.$set(reply, 'replySubmitting', false);
                        if (reply.replyUserId && userMap.has(reply.replyUserId)) {
                            this.$set(reply, 'replyToUser', userMap.get(reply.replyUserId).nickname);
                        }
                    });
                }
            });
        },
        showReplyForm(comment) {
            this.moment.comments.forEach(c => {
                if (c.id !== comment.id) this.$set(c, 'showReplyForm', false);
                if (c.children) {
                    c.children.forEach(r => this.$set(r, 'showReplyForm', false));
                }
            });
            this.$set(comment, 'showReplyForm', !comment.showReplyForm);
        },
        cancelReply(comment) {
            this.$set(comment, 'showReplyForm', false);
            this.$set(comment, 'replyContent', '');
        },
        async submitReply(comment, momentId) {
            if (!this.userInfo) {
                this.$message.warning('请先登录');
                this.$router.push('/login');
                return;
            }
            if (!comment.replyContent || !comment.replyContent.trim()) {
                this.$message.warning('回复内容不能为空');
                return;
            }
            comment.replySubmitting = true;
            try {
                const res = await replyComment({
                    momentId: momentId,
                    content: comment.replyContent.trim(),
                    parentId: comment.id
                });
                if (res.code === 200) {
                    this.$message.success('回复成功');
                    comment.replyContent = '';
                    comment.showReplyForm = false;
                    await this.loadComments(momentId);
                    await this.getMomentCommentCount(momentId);
                } else {
                    this.$message.error(res.msg || '回复失败');
                }
            } catch (error) {
                this.$message.error('回复失败，请稍后重试');
            } finally {
                comment.replySubmitting = false;
            }
        },
        async handleLikeComment(comment, momentId) {
            if (!this.userInfo) {
                this.$message.warning('请先登录')
                this.$router.push('/login')
                return
            }
            try {
                const res = await toggleCommentLike(comment.id)
                if (res.code === 200) {
                    this.$set(comment, 'isLiked', res.data.liked)
                    this.$set(comment, 'likeCount', res.data.likeCount)
                }
            } catch (error) {
                this.$message.error('操作失败')
            }
        },
        async handleDeleteComment(commentId, momentId) {
            if (!this.userInfo) {
                this.$message.warning('请先登录');
                this.$router.push('/login');
                return;
            }
            try {
                await this.$confirm('确定要删除这条评论吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                });
                const res = await deleteComment(commentId);
                if (res.code === 200) {
                    this.$message.success('删除成功');
                    await this.loadComments(momentId);
                    await this.getMomentCommentCount(momentId);
                } else {
                    this.$message.error(res.msg || '删除失败');
                }
            } catch (error) {
                if (error !== 'cancel') {
                    this.$message.error('删除失败');
                }
            }
        },
        goToUserPage(userId) {
            if (userId) {
                this.$router.push(`/user/${userId}`);
            }
        },
        onClosePopover() {
            // 这个方法可以用来处理关闭浮窗后的逻辑，如果需要的话
        },
    }
}
</script>

<style lang="scss" scoped>
.moment-detail-wrapper {
    width: 100%;
}

.moment-detail-container {
    min-height: calc(100vh - 70px);
    position: relative;
    animation: fadeIn 0.5s ease;
}

.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    backdrop-filter: blur(2px);
}

.header-content {
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    transform: translateY(10px);
    animation: headerContentSlideUp 0.8s ease forwards 0.2s;
}

.page-title {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: 1px;
    animation: fadeInUp 0.8s ease;

    @media screen and (max-width: 768px) {
        font-size: 2.2rem;
    }
}

.subtitle {
    font-size: 1.4rem;
    opacity: 0.9;
    animation: fadeInUp 0.8s ease 0.2s both;

    @media screen and (max-width: 768px) {
        font-size: 1.1rem;
    }
}

.main-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 40px;
}

.skeleton-wrapper {
    pointer-events: none;

    .skeleton-layout {
        display: flex;
        gap: 22px;
    }

    .skeleton-avatar-part {
        flex-shrink: 0;
        width: 55px;
    }

    .skeleton-avatar {
        width: 55px;
        height: 55px;
        border-radius: 14px;
    }

    .skeleton-mobile-user-info {
        display: none;
    }

    .skeleton-main-part {
        flex: 1;
        min-width: 0;

        .skeleton-header {
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .skeleton-content-wrapper {
            background: var(--card-bg);
            padding: 24px;
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            border: 1px solid rgba(0, 0, 0, 0.03);
        }

        .skeleton-actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid rgba(0, 0, 0, 0.08);

            .el-skeleton__item--button {
                width: 80px;
                height: 38px;
                border-radius: 24px;
                margin-right: 20px;
            }
        }
    }

    @media screen and (max-width: 768px) {
        .skeleton-layout {
            flex-direction: column;
            gap: 15px;
        }

        .skeleton-avatar-part {
            width: auto;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .skeleton-avatar {
            width: 45px;
            height: 45px;
            border-radius: 12px;
        }

        .skeleton-mobile-user-info {
            display: flex;
            flex-direction: column;
        }

        .skeleton-main-part .skeleton-header {
            display: none;
        }

        .skeleton-main-part .skeleton-actions {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;

            .el-skeleton__item--button {
                margin: 0;
                width: auto;
            }
        }
    }
}

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-color, #409EFF);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    z-index: 1000;
    opacity: 0.8;

    i {
        font-size: 24px;
    }

    &:hover {
        opacity: 1;
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

    @media screen and (max-width: 768px) {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);

        i {
            font-size: 20px;
        }
    }
}

.empty-text {
    font-size: 16px;
    color: #909399;
    margin-bottom: 20px;
}

.moment-item {
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 22px;
    background: var(--card-bg);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;

    &:not(.skeleton-wrapper) {
        opacity: 0;
        transform: translateY(20px);
    }

    &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
    }

    &.animated:not(.skeleton-wrapper) {
        animation: fadeInUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }

    &:hover:not(.skeleton-wrapper) {
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);

        &:after {
            opacity: 1;
        }
    }

    @media screen and (max-width: 768px) {
        flex-direction: column;
        gap: 15px;
        padding: 22px;
        border-radius: 14px;
    }
}

.moment-time,
.comment-time,
.reply-time {
    display: inline-flex;
    align-items: center;
    color: #909399;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 20px;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;

    i {
        margin-right: 8px;
        font-size: 14px;
    }

    .time-text {
        white-space: nowrap;
    }

    &:hover {
        background-color: rgba(64, 158, 255, 0.1);
        color: #409EFF;

        &::after {
            content: attr(data-full-time);
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 8px 14px;
            border-radius: 8px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 10;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(5px);
            animation: fadeIn 0.2s ease;
        }
    }
}

.moment-time-container {
    display: flex;
    flex-direction: column;
    gap: 6px;

    &.updated {
        position: relative;

        &::before {
            content: '';
            position: absolute;
            left: 10px;
            top: 22px;
            height: calc(100% - 22px);
            width: 2px;
            background-color: #e0e0e0;
            z-index: 0;
            border-radius: 1px;
        }
    }

    .update-time {
        color: #E6A23C;
        font-style: italic;

        i {
            animation: spin 2s infinite linear;
            animation-play-state: paused;
        }

        &:hover {
            background-color: rgba(230, 162, 60, 0.15);
            color: #E6A23C;

            i {
                animation-play-state: running;
            }
        }
    }
}

.comment-time,
.reply-time {
    margin-left: 8px;
    font-size: 12px;
    padding: 2px 8px;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.user-avatar {
    flex-shrink: 0;
    width: 55px;

    .avatar {
        width: 55px;
        height: 55px;
        border-radius: 14px;
        object-fit: cover;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
        transition: transform 0.35s ease, box-shadow 0.35s ease;

        &:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.18);
        }
    }

    @media screen and (max-width: 768px) {
        width: auto;
        display: flex;
        align-items: center;
        gap: 15px;

        .avatar {
            width: 45px;
            height: 45px;
            border-radius: 12px;
        }
    }
}

.moment-main {
    flex: 1;
    min-width: 0;

    @media screen and (max-width: 768px) {
        .moment-header {
            display: none;
        }
    }
}

.moment-header {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 14px;

    .name {
        font-size: 17px;
        font-weight: 600;
        color: #d4d4d4;
        // color: var(--text-color-primary);
    }
}

.moment-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;

    &:before {
        content: '';
        position: absolute;
        top: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
    }

    .action-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        margin-bottom: 8px;
        padding: 10px 18px;
        border-radius: 24px;
        cursor: pointer;
        transition: all 0.25s ease;
        background-color: rgba(0, 0, 0, 0.03);

        &:hover {
            background-color: rgba(0, 0, 0, 0.06);
            transform: translateY(-2px);
        }

        i {
            font-size: 16px;
            color: #8a8a8a;
            margin-right: 6px;
            transition: all 0.3s ease;

            &.liked {
                color: #e74c3c;
                animation: heart-beat 0.6s ease-in-out;
                transform: scale(1.2);
            }
        }

        span {
            margin-left: 5px;
            font-size: 14px;
            color: #606266;
            font-weight: 500;
        }
    }

    @media screen and (max-width: 768px) {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding-top: 14px;
        margin-top: 16px;

        .action-item {
            margin: 0;
            padding: 8px 14px;
            justify-content: center;

            span {
                font-size: 13px;
            }
        }
    }
}

@keyframes heart-beat {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.3);
    }

    50% {
        transform: scale(0.9);
    }

    75% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.comments-section {
    margin-top: 24px;
    border-top: 1px solid #ebeef5;
    padding-top: 24px;
    position: relative;

    &:before {
        content: '';
        position: absolute;
        top: -1px;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
    }
}

.comment-thread {
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f2f5;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    position: relative;
    overflow: hidden;
    z-index: 0;

    &.animated {
        animation: fadeInUp 0.6s ease forwards;
    }

    &:hover {
        transform: translateX(3px);
        background-color: rgba(0, 0, 0, 0.01);
        border-radius: 8px;
        padding-left: 5px;
    }

    &:last-child {
        border-bottom: none;
    }

    &:before {
        content: '';
        position: absolute;
        left: -10px;
        top: 20px;
        bottom: 20px;
        width: 2px;
        background: linear-gradient(180deg, transparent, #409EFF, transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    &:hover:before {
        opacity: 0.5;
    }
}

.comment-item {
    display: flex;
    margin-bottom: 15px;
}

.comment-avatar img {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    /* 与主头像风格统一 */
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

.comment-content {
    flex: 1;
    margin-left: 16px;
}

.comment-header {
    margin-bottom: 8px;
    display: flex;
    align-items: center;

    .comment-user {
        font-weight: 600;
        margin-right: 8px;
        color: #d4d4d4;
        // color: var(--text-color-primary);
        position: relative;

        &:after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background-color: var(--primary-color, #409EFF);
            transition: width 0.3s ease;
        }

        &:hover:after {
            width: 100%;
        }
    }
}

.comment-text {
    margin-bottom: 12px;
    word-break: break-word;
    line-height: 1.7;
    font-size: 15px;
    color: #d4d4d4;
    // color: var(--text-color);
    padding: 4px 0;
}

.replies-list {
    margin-left: 52px;
    background-color: rgba(245, 247, 250, 0.6);
    border-radius: 12px;
    padding: 14px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;

    &:hover {
        background-color: rgba(245, 247, 250, 0.9);
        box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.06);
    }
}

.reply-item {
    display: flex;
    margin-bottom: 16px;
    transition: transform 0.25s ease;
    padding: 4px;

    &:hover {
        transform: translateX(3px);
    }

    &:last-child {
        margin-bottom: 0;
    }
}

.reply-avatar img {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    /* 与评论头像风格统一 */
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;

    &:hover {
        transform: scale(1.1);
    }
}

.reply-content {
    flex: 1;
    margin-left: 14px;
}

.reply-header {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .reply-user {
        font-weight: 600;
        color: var(--text-color-primary);
    }

    .reply-to {
        margin-left: 0;
        display: inline-flex;
        align-items: center;
    }

    .reply-separator {
        margin: 0 8px;
        font-size: 14px;
        color: var(--text-color-secondary);
    }

    .reply-to-name {
        color: #409EFF;
        font-weight: 500;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #409EFF;
            transform: scaleX(0);
            transition: transform 0.3s ease;
            transform-origin: left;
        }

        &:hover::after {
            transform: scaleX(1);
        }
    }
}

.reply-text {
    margin-bottom: 10px;
    word-break: break-word;
    line-height: 1.6;
    font-size: 14px;
    color: var(--text-color);
    padding: 2px 0;
}

.comment-actions,
.reply-actions {
    display: flex;
    align-items: center;
}

.action-btn {
    display: flex;
    align-items: center;
    margin-right: 16px;
    padding: 4px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 13px;
    background-color: rgba(0, 0, 0, 0.02);

    &:hover {
        background-color: rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
    }

    i {
        font-size: 14px;
        margin-right: 6px;

        &.liked {
            color: #e74c3c;
            animation: heart-beat 0.5s ease-in-out;
        }
    }

    span {
        color: #606266;
        font-weight: 500;
    }

    @media screen and (max-width: 768px) {
        padding: 6px 14px;
        /* 增加移动端按钮的可点击区域 */
        margin-right: 10px;
    }
}

.delete-btn {
    cursor: pointer;
    color: #909399;
    font-size: 14px;
    margin-left: auto;
    opacity: 0.5;
    transition: all 0.3s;
    padding: 4px 8px;
    border-radius: 4px;

    &:hover {
        color: #f56c6c;
        opacity: 1;
        background-color: rgba(245, 108, 108, 0.1);
    }

    @media screen and (max-width: 768px) {
        padding: 6px 10px;
        /* 增加移动端删除按钮的可点击区域 */
    }
}

.reply-form,
.comment-form {
    margin-top: 12px;

    .comment-form-header {
        display: flex;
        margin-bottom: 12px;

        .current-user {
            display: flex;
            align-items: center;
            background-color: rgba(64, 158, 255, 0.05);
            padding: 8px 12px;
            border-radius: 30px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;

            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(64, 158, 255, 0.1), transparent);
                transform: translateX(-100%);
                transition: transform 0.6s ease;
            }

            &:hover {
                background-color: rgba(64, 158, 255, 0.1);
                transform: translateY(-2px);

                &:before {
                    transform: translateX(100%);
                }
            }

            .user-avatar-img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                object-fit: cover;
                margin-right: 8px;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
                transition: transform 0.3s ease;

                &:hover {
                    transform: scale(1.1);
                }
            }

            .user-name {
                font-size: 14px;
                font-weight: 500;
                color: var(--primary-color, #409EFF);
            }

            @media screen and (max-width: 768px) {
                flex: 1;
                justify-content: center;
            }
        }

        .login-tip {
            color: #E6A23C;
            font-size: 14px;
            background-color: rgba(230, 162, 60, 0.1);
            padding: 8px 16px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            text-decoration: none;
            transition: all 0.3s ease;

            &:hover {
                background-color: rgba(230, 162, 60, 0.2);
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(230, 162, 60, 0.15);
            }

            i {
                margin-right: 8px;
                font-size: 16px;
            }

            span {
                font-weight: 500;
            }

            @media screen and (max-width: 768px) {
                flex: 1;
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding: 16px 10px;

                i {
                    margin-right: 0;
                    margin-bottom: 8px;
                    font-size: 22px;
                }
            }
        }
    }

    .reply-input,
    .comment-input {
        margin-bottom: 14px;

        :deep(.el-textarea__inner) {
            transition: all 0.3s ease;
            border-radius: 8px;
            resize: none;
            padding: 12px 15px;
            background-color: rgba(245, 247, 250, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.05);

            &:focus {
                box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
                background-color: rgba(255, 255, 255, 0.95);
                transform: translateY(-1px);
            }
        }
    }

    .form-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .comment-tips {
            font-size: 13px;
            color: #909399;
            font-style: italic;
        }

        .el-button {
            border-radius: 8px;
            padding: 10px 20px;
            transition: all 0.3s ease;

            &:hover:not(:disabled) {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            &:disabled {
                opacity: 0.7;
                background-color: #a0cfff;
                border-color: #a0cfff;
            }
        }

        @media screen and (max-width: 768px) {
            flex-direction: column;
            gap: 12px;

            .comment-tips {
                text-align: center;
                margin-bottom: 5px;
                order: 2;
            }

            .el-button {
                width: 100%;
                order: 1;
            }
        }
    }

    @media screen and (max-width: 768px) {
        margin-top: 15px;
    }
}

.reply-form .form-actions {
    justify-content: flex-end;
    gap: 10px;

    @media screen and (max-width: 768px) {
        flex-direction: row;
        justify-content: space-between;

        .el-button {
            flex: 1;
            width: auto;
        }
    }
}

.no-comments {
    text-align: center;
    padding: 35px 0;
    color: #909399;
    font-size: 15px;
    background-color: rgba(245, 247, 250, 0.4);
    border-radius: 12px;
    margin: 20px 0;
    transition: all 0.3s ease;

    &:hover {
        background-color: rgba(245, 247, 250, 0.7);
        transform: translateY(-2px);
    }

    i {
        font-size: 26px;
        margin-right: 10px;
        vertical-align: middle;
        color: #B0B0B0;
        transition: transform 0.3s ease;
        display: inline-block;
    }

    &:hover i {
        transform: rotate(10deg);
    }
}

.comments-pagination {
    margin-top: 20px;
    text-align: center;

    :deep(.el-pagination) {
        padding: 12px 15px;
        background: rgba(245, 247, 250, 0.4);
        border-radius: 30px;
        display: inline-flex;
        justify-content: center;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;

        &:hover {
            background: rgba(245, 247, 250, 0.6);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }

        .btn-prev,
        .btn-next {
            border-radius: 50%;
            transition: all 0.3s ease;

            &:hover {
                transform: translateY(-2px);
            }
        }

        .number {
            border-radius: 50%;
            margin: 0 4px;
            font-weight: 500;
            transition: all 0.3s ease;

            &.active {
                transform: scale(1.1);
                font-weight: 600;
                box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
            }

            &:hover:not(.active) {
                transform: translateY(-2px);
            }
        }

        @media screen and (max-width: 768px) {
            padding: 10px;
            width: 100%;

            .number {
                margin: 0 2px;
            }
        }
    }

    @media screen and (max-width: 768px) {
        margin-top: 15px;
    }
}

.moment-content-wrapper {
    background: var(--card-bg);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    z-index: 0;

    &:not(.skeleton-wrapper) {
        opacity: 0;
        transform: translateY(20px);
    }

    &.animated {
        animation: fadeInUp 0.5s ease forwards 0.2s;
    }

    &:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #409EFF, #64b5ff);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    &:hover:before {
        opacity: 1;
    }

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 80px;
        height: 80px;
        background: radial-gradient(circle at bottom right, rgba(64, 158, 255, 0.05), transparent 70%);
        z-index: -1;
        pointer-events: none;
    }

    @media screen and (max-width: 768px) {
        padding: 18px 15px;
        border-radius: 10px;
        margin-bottom: 15px;
    }

    .moment-content {
        line-height: 1.85;
        font-size: 16px;
        white-space: pre-wrap;
        word-break: break-word;
        letter-spacing: 0.2px;
        transition: max-height 0.4s ease-out;
        // color: var(--text-color);
        color: #d4d4d4;

        &.collapsed {
            max-height: 320px;
            overflow: hidden;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100px;
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--card-bg) 90%);
                pointer-events: none;
                border-radius: 0 0 12px 12px;
            }
        }

        :deep(p) {
            margin-bottom: 12px;
            line-height: 1.85;
        }

        :deep(h1),
        :deep(h2),
        :deep(h3),
        :deep(h4),
        :deep(h5),
        :deep(h6) {
            margin: 20px 0 12px;
            font-weight: 600;
            color: var(--text-color-primary);
        }

        :deep(a) {
            color: #409EFF;
            text-decoration: none;
            position: relative;
            padding: 0 2px;

            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background-color: #409EFF;
                transform: scaleX(0);
                transition: transform 0.3s ease;
                transform-origin: left;
            }

            &:hover {
                text-decoration: none;

                &::after {
                    transform: scaleX(1);
                }
            }
        }

        :deep(code) {
            background-color: rgba(0, 0, 0, 0.05);
            padding: 3px 6px;
            border-radius: 4px;
            font-size: 14px;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
        }

        :deep(pre) {
            margin: 18px 0;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

            code {
                padding: 0;
                background: transparent;
            }
        }

        :deep(blockquote) {
            border-left: 4px solid #409EFF;
            padding: 12px 18px;
            margin: 12px 0;
            background-color: rgba(0, 0, 0, 0.03);
            border-radius: 0 8px 8px 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

            p:last-child {
                margin-bottom: 0;
            }
        }

        @media screen and (max-width: 768px) {
            font-size: 15px;
            line-height: 1.7;

            &.collapsed {
                max-height: 280px;
            }

            :deep(pre) {
                margin: 15px 0;
                border-radius: 6px;

                code {
                    font-size: 13px;
                }
            }

            :deep(blockquote) {
                padding: 10px 15px;
                margin: 10px 0;
            }
        }
    }

    .moment-images {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 16px;

        .image-container {
            position: relative;
            width: 100%;
            padding-top: 100%;
            overflow: hidden;
            border-radius: 10px;
            background-color: #f5f5f5;
            cursor: zoom-in;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;

            &:hover {
                transform: translateY(-4px) scale(1.02);
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
                z-index: 1;
            }

            img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.5s ease;

                &:hover {
                    transform: scale(1.08);
                }
            }
        }

        @media screen and (max-width: 480px) {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-top: 12px;

            .image-container:nth-child(n+5) {
                display: none;
            }
        }
    }
}

.mobile-user-info {
    display: none;
    flex-direction: column;

    @media screen and (max-width: 768px) {
        display: flex;
    }

    .name {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-color-primary);
        margin-bottom: 4px;
    }

    .moment-time-container {
        margin-top: 2px;
    }
}

.expand-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    cursor: pointer;
    color: #409EFF;
    font-size: 14px;
    transition: all 0.3s;
    margin-top: 16px;
    background: rgba(64, 158, 255, 0.1);
    border-radius: 24px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
    position: relative;
    overflow: hidden;
    z-index: 1;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, rgba(64, 158, 255, 0.2), rgba(100, 181, 255, 0.2));
        z-index: -1;
        transform: translateX(-100%);
        transition: transform 0.4s ease;
    }

    &:hover {
        background: transparent;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.25);

        &:before {
            transform: translateX(0);
        }
    }

    span {
        margin-right: 8px;
    }

    i {
        transition: transform 0.3s ease;
    }

    &:hover i {
        transform: translateY(2px);
    }

    @media screen and (max-width: 768px) {
        width: 100%;
        margin-top: 12px;
        padding: 8px 15px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .moment-item,
    .moment-content-wrapper,
    .comment-thread,
    .reply-item,
    .expand-collapse-btn,
    .image-container,
    .avatar,
    .action-item,
    .action-btn,
    .reply-input,
    .comment-input,
    .el-button,
    .no-comments {
        transition: none !important;
        transform: none !important;
        animation: none !important;

        &:hover {
            transform: none !important;
            animation: none !important;
        }
    }
}

.dark-mode {
    .moment-item {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.08);

        &:after {
            background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
        }
    }

    .comment-thread {
        &:before {
            background: linear-gradient(180deg, transparent, #64b5ff, transparent);
        }

        border-bottom-color: rgba(255, 255, 255, 0.08);

        &:hover {
            background-color: rgba(255, 255, 255, 0.03);
        }
    }

    .moment-content-wrapper {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.08);

        &:before {
            background: linear-gradient(90deg, #64b5ff, #409EFF);
        }

        &:hover {
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        }

        &:after {
            background: radial-gradient(circle at bottom right, rgba(100, 181, 255, 0.03), transparent 70%);
        }

        .moment-content {
            color: rgba(255, 255, 255, 0.9);
            /* 提高文本亮度 */

            &.collapsed::after {
                background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--card-bg) 90%);
            }

            :deep(p),
            :deep(li),
            :deep(span) {
                color: rgba(255, 255, 255, 0.85);
                /* 提高文本亮度 */
            }

            :deep(h1),
            :deep(h2),
            :deep(h3),
            :deep(h4),
            :deep(h5),
            :deep(h6) {
                color: rgba(255, 255, 255, 0.95);
                /* 提高标题亮度 */
            }

            :deep(code) {
                background-color: rgba(255, 255, 255, 0.1);
                /* 提高代码块对比度 */
                color: rgba(255, 255, 255, 0.9);
            }

            :deep(blockquote) {
                background-color: rgba(255, 255, 255, 0.05);
                border-left-color: #64b5ff;
            }
        }
    }

    .replies-list {
        background-color: rgba(30, 30, 30, 0.5);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.05);

        &:hover {
            background-color: rgba(40, 40, 40, 0.6);
        }
    }

    .no-comments {
        background-color: rgba(30, 30, 30, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.05);

        &:hover {
            background-color: rgba(40, 40, 40, 0.6);
        }

        i {
            color: rgba(180, 180, 180, 0.8);
        }
    }

    .comment-text,
    .reply-text {
        color: rgba(255, 255, 255, 0.85);
        /* 提高评论文本亮度 */
    }

    .comment-user,
    .reply-user,
    .name {
        color: rgba(255, 255, 255, 0.95) !important;
        /* 提高用户名亮度 */
    }

    .comments-pagination {
        :deep(.el-pagination) {
            background: rgba(30, 30, 30, 0.5);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);

            .number {
                color: rgba(255, 255, 255, 0.8);

                &.active {
                    background-color: rgba(64, 158, 255, 0.8);
                    color: #fff;
                }

                &:hover:not(.active) {
                    background-color: rgba(64, 158, 255, 0.2);
                }
            }

            .btn-prev,
            .btn-next {
                background-color: rgba(255, 255, 255, 0.1);
                color: rgba(255, 255, 255, 0.8);

                &:hover {
                    background-color: rgba(255, 255, 255, 0.2);
                }
            }
        }
    }

    .action-btn,
    .action-item {
        background-color: rgba(255, 255, 255, 0.08);

        &:hover {
            background-color: rgba(255, 255, 255, 0.12);
        }

        span {
            color: rgba(255, 255, 255, 0.8);
            /* 提高按钮文字亮度 */
        }

        i {
            color: rgba(220, 220, 220, 0.8);

            &.liked {
                color: #e74c3c;
            }
        }
    }

    .moment-actions,
    .comments-section {
        border-top-color: rgba(255, 255, 255, 0.1);

        &:before {
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        }
    }

    .current-user {
        &:before {
            background: linear-gradient(90deg, transparent, rgba(100, 181, 255, 0.15), transparent);
        }

        background-color: rgba(64, 158, 255, 0.15);

        .user-name {
            color: rgba(100, 180, 255, 0.9);
            /* 提高用户名亮度 */
        }

        .user-avatar-img {
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }
    }

    .reply-form,
    .comment-form {

        .comment-input,
        .reply-input {
            :deep(.el-textarea__inner) {
                background-color: rgba(30, 30, 30, 0.7);
                border-color: rgba(255, 255, 255, 0.15);
                color: rgba(255, 255, 255, 0.9);

                &:focus {
                    background-color: rgba(40, 40, 40, 0.9);
                    border-color: rgba(100, 180, 255, 0.5);
                }
            }
        }

        .login-tip {
            background-color: rgba(230, 162, 60, 0.2);
            color: rgba(255, 255, 255, 0.9);

            a {
                color: #64b5ff;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            }
        }

        .form-actions {
            .comment-tips {
                color: rgba(200, 200, 200, 0.7);
            }
        }
    }

    .expand-collapse-btn {
        background: rgba(64, 158, 255, 0.2);
        color: rgba(100, 180, 255, 0.9);
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);

        &:hover {
            background: transparent;
        }

        &:before {
            background: linear-gradient(90deg, rgba(64, 158, 255, 0.3), rgba(100, 181, 255, 0.3));
        }
    }

    .moment-time,
    .comment-time,
    .reply-time {
        color: rgba(200, 200, 200, 0.7);

        &:hover {
            background-color: rgba(100, 180, 255, 0.15);
            color: rgba(100, 180, 255, 0.9);

            &::after {
                background-color: rgba(20, 20, 20, 0.9);
            }
        }
    }

    .delete-btn {
        color: rgba(200, 200, 200, 0.6);

        &:hover {
            color: #f56c6c;
            background-color: rgba(245, 108, 108, 0.15);
        }
    }

    .moment-images {
        .image-container {
            background-color: #2c2c2c;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

            &:hover {
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
            }
        }
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes headerContentSlideUp {
    from {
        transform: translateY(10px);
        opacity: 0.8;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.moment-author-avatar {
    margin-right: 15px;

    .moment-avatar {
        cursor: pointer;
        transition: transform 0.3s ease;

        &:hover {
            transform: scale(1.1);
        }
    }
}

.comment {
    display: flex;
    margin-bottom: 15px;
}

.comment-avatar-container {
    margin-right: 15px;

    .comment-avatar {
        cursor: pointer;
        transition: transform 0.3s ease;

        &:hover {
            transform: scale(1.1);
        }
    }
}

.reply {
    display: flex;
    margin-top: 15px;
}

.reply-avatar-container {
    margin-right: 10px;

    .reply-avatar {
        width: 30px;
        height: 30px;
        cursor: pointer;
        transition: transform 0.3s ease;

        &:hover {
            transform: scale(1.1);
        }
    }
}

.comment-pagination {
    margin-top: 20px;
}

.user-link {
    cursor: pointer;
    transition: all 0.3s ease;
}

.user-link:hover {
    text-decoration: underline;
    color: var(--primary, #409eff);
}
</style>